<template>
  <div class="IndexPage">
    <div class="HomeTopBox">
      <h4 class="homeTitle">青城风光</h4>
      <div class="line"></div>
    </div>
    <div class="mainBox">
      <div class="titleBox">旅游路线</div>
      <div class="imgBox">
        <template v-for="(item, index) in imgList">
          <div class="itemBox" :key="index"
               @click="jumpPage(item)"
               :style="{background: 'url('+HostUrl+item.citySceneryPic+')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
            <div class="squireBox">
              <div class="englishName">{{ item.citySceneryEnglish }}</div>
              <div class="name">{{ item.citySceneryName }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '../../axios'
export default {
  name: 'HomePage',
  data () {
    return {
      imgList: [{
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q2.png'),
        name: '青城前山',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q3.png'),
        name: '青城后山',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q4.png'),
        name: '农家乐',
        englishName: 'AGRITAINMENT'
      }],
      HostUrl: 'http://study.s1.natapp.cc/QingchengTravel/',
      dataList: []
    }
  },
  methods: {
    jumpPage (obj) {
      this.$router.push({
        path: obj.pathUrl
      })
    },
    getData () {
      axios.get('/preview/cityScenery/getCityScenerysForApp').then((res) => {
        this.dataList = res.data.map.pageInfo.list
      }).catch(function (err) {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
  .IndexPage{
    width: 100%;
    height: auto;
    min-height: calc(100vh);
    background: #fff;
    padding-bottom: 1px;
    .clear {
      clear: both;
    }
    .HomeTopBox{
      width: 750px;
      height: 253px;
      padding-top: 125px;
      background: url("../../assets/qingcheng/q1.png") no-repeat;
      background-size: 100% 100%;
      h4{
        font-size: 30px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 2.5px;
        color: #fff;
        margin: 55px auto 10px auto;
        text-align: center;
      }
      .line{
        width: 60px;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        margin:  0 auto;
      }
    }
    .mainBox{
      width: 100%;
      margin: 50px auto;
      .titleBox{
        font-family: SourceHanSansCN-Regular;
        font-size: 30px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 3px;
        color: #4b4b4b;
        text-align: center;
        margin-bottom: 20px;
      }
      .imgBox {
        .itemBox {
          width: 710px;
          height: 235px;
          margin: 30px auto;
          border-radius: 5px;
          padding-top: 117px;
          .squireBox{
            width: 348px;
            height: 117px;
            margin: 0 auto;
            background: url("../../assets/qingcheng/bg.png") no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
            font-weight: normal;
            font-stretch: normal;
            font-size: 24px;
            letter-spacing: 2.4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .name{
              font-family: FuturaBT-BoldCondensed;
            }
            .englishName{
              font-family: SimHei;
            }
          }
        }
      }
    }
  }
</style>
